<!--
 * @Description:
 * @Author: Ambrose
 * @Date: 2022-01-18 15:43:06
 * @LastEditTime: 2024-06-21 14:44:02
 * @LastEditors: Ambrose
-->
<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="dialogTitle"
    width="40%"
    @close="handleClose"
  >
    <el-form
      ref="fromRef"
      :model="form"
      label-width="100px"
      style="max-width: 600px"
      :rules="rules"
    >
      <el-form-item label="客户编号" prop="id">
        <el-input v-model="form.id" />
      </el-form-item>
      <el-form-item label="客户姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="客户简称" prop="abbreviation">
        <el-input v-model="form.abbreviation" />
      </el-form-item>
      <el-form-item label="客户地址" prop="address">
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item label="公司电话" prop="tel">
        <el-input v-model="form.tel" />
      </el-form-item>
      <el-form-item label="公司邮件" prop="email">
        <el-input v-model="form.email" />
      </el-form-item>
      <el-form-item label="联系人" prop="contactPerson">
        <el-input v-model="form.contactPerson" />
      </el-form-item>
      <el-form-item label="联系人电话" prop="contactTel">
        <el-input v-model="form.contactTel" />
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="form.remarks" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineEmits, defineProps, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
const emits = defineEmits(['update:modelValue', 'init'])

const props = defineProps({
  dialogTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogTableValue: {
    type: Object,
    default: () => {}
  }
})

const form = ref({
  id: '',
  name: '',
  abbreviation: '',
  address: '',
  tel: '',
  email: '',
  contactPerson: '',
  contactTel: '',
  remarks: ''
})
const rules = ref({
  id: [
    {
      required: true,
      message: '请输入公司编号',
      trigger: 'blur'
    }
  ],
  name: [
    {
      required: true,
      message: '请输入公司名字',
      trigger: 'blur'
    }
  ],
  abbreviation: [
    {
      required: true,
      message: '请输入公司简称',
      trigger: 'blur'
    }
  ],
  address: [
    {
      required: true,
      message: '请输入公司地址',
      trigger: 'blur'
    }
  ],
  tel: [
    {
      required: true,
      message: '请输入公司电话',
      trigger: 'blur'
    }
  ],
  email: [
    {
      required: true,
      message: '请输入公司邮件',
      trigger: 'blur'
    }
  ],
  contactPerson: [
    {
      required: false,
      message: '请输入联系人',
      trigger: 'blur'
    }
  ],
  contactTel: [
    {
      required: false,
      message: '请输入联系人电话',
      trigger: 'blur'
    }
  ],
  remarks: [
    {
      required: false,
      message: '请输入备注',
      trigger: 'blur'
    }
  ]
})
const fromRef = ref(null)

const handleClose = () => {
  emits('update:modelValue', false)
}

const handleConfirm = async () => {
  const {
    id,
    name,
    abbreviation,
    address,
    tel,
    email,
    contactPerson,
    contactTel
  } = form.value

  if (
    id &&
    name &&
    abbreviation &&
    address &&
    tel &&
    email &&
    contactPerson &&
    contactTel !== ''
  ) {
    if (props.dialogTitle === '添加客户') {
      const res = await axios.post('http://127.0.0.1:8090/producer', form.value)
      if (res.data.code === 200) {
        ElMessage({
          message: '成功',
          type: 'success'
        })
        emits('init')
        handleClose()
      } else {
        ElMessage.error(res.data.msg)
      }
    } else {
      const res = await axios.put('http://127.0.0.1:8090/producer', form.value)
      if (res.data.code === 200) {
        ElMessage({
          message: '成功',
          type: 'success'
        })
        emits('init')
        handleClose()
      } else {
        ElMessage.error(res.data.msg)
      }
    }
  } else {
    ElMessage.error('缺少信息！！！ 失败')
  }
}

watch(
  () => props.dialogTableValue,
  () => {
    form.value = props.dialogTableValue
  },
  { deep: true, immediate: true }
)
</script>

<style lang="scss" scoped></style>
